<template>
  <view>
    <view class="fixed-top" :style="navBarHeight">
      <!-- 状态栏 -->
      <view :style="'height:'+statusBarHeight+'px'">
        
      </view>
      <!-- 导航 -->
      <view class="w-100 flex align-center justify-between" style="height: 90rpx;">
        <!-- 导航左 -->
        <view class="flex align-center">
          <!-- 返回按钮 -->
          <view class="flex align-center justify-center"
          hover-class="bg-hover-light" @click="back"
          style="height: 90rpx;width: 90rpx;">
          	<text class="iconfont font-md font-voyaged" :style="buttonStyle">{{'\ue675'}}</text>
          </view>
          <!-- <free-icon-button @click="back">&#xe675;</free-icon-button> -->
          <!-- 标题 -->
          <text class="font-md ml-3" v-if="title">{{title}}</text>
        </view>
        <!-- 导航右 -->
        <view class="flex align-center">
          <view class="flex align-center justify-center"
          hover-class="bg-hover-light"
          style="height: 90rpx;width: 90rpx;" @click="$emit('clickRight')">
          	<text class="iconfont font-md font-voyaged" :style="buttonStyle">{{'\ue678'}}</text>
          </view>
          <!-- <free-icon-button>&#xe678;</free-icon-button> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: [String, Boolean],
        default: false
      },
      scrollTop: {
        type: [Number, String],
        default: 0
      },
      bgColor: {
        type: String,
        default: "bg-light"
      }
    },
    data() {
    	return {
    		statusBarHeight: 0,
        navBarHeight: 0
    	}
    },
    mounted() {
      // #ifdef APP-PLUS-NVUE
      this.statusBarHeight = plus.plus.navigatorsc.getStatusbarHeight()
      // #endif
      // 将rpx单位值转换成px
      this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
    },
    computed: {
      // 计算变化
      changeNumber() {
        let start = uni.upx2px(500)
        let end = uni.upx2px(620)
        let H = end - start
        let num = 0
        if (this.scrollTop > start) {
          num = (this.scrollTop - start) / H
        }
        return num > 1 ? 1 : num
      },
      navBarStyle() {
        return `background-color: rgba(255, 255, 255, ${this.changeNumber});`
      },
      buttonStyle() {
        if (this.changeNumber > 0) {
          return `color: rgba(0, 0, 0, ${this.changeNumber})`
        }
        return 'color: #FFFFFF;'
      }
    },
    methods: {
     // 返回
     back() {
       uni.navigateBack({
         delta: 1
       })
     }
    }
  }
</script>

<style>
  .font-custom {
    font-size: 25px;
  }
  .font-icon-vogage {
    font-size: 25px;
    color: white;
    padding-left: 30px;
    padding-right: 20px;
  }
  .font-voyaged {
    font-size: 25px;
  }
</style>
